<template>
  <el-drawer
    :append-to-body="true"
    title="条件配置"
    v-model="visible"
    custom-class="condition_copyer set_promoter"
    :show-close="false"
    :size="550"
    :before-close="saveCondition"
  >
    <template #header="{ titleId, titleClass }">
      <h3 :id="titleId" :class="titleClass">条件设置</h3>
      <!-- <select v-model="conditionConfig.priorityLevel" class="priority_level">
        <option
          v-for="item in conditionsConfig.conditionNodes.length"
          :value="item"
          :key="item"
        >
          优先级{{ item }}
        </option>
      </select> -->
    </template>
    <div class="demo-drawer__content">
      <div class="condition_content drawer_content">
        <div>
          <el-form :model="conForm" label-width="87px">
            <el-form-item label="条件描述：">
              <el-input v-model="conForm.name" />
            </el-form-item>
            <el-radio-group v-model="conForm.type">
              <div>
                <el-radio label="1">自动条件</el-radio>
                <section class="autocon">
                  {{ conForm.autocon }}
                </section>
              </div>
              <div>
                <el-radio label="2">排他条件</el-radio>
                <p class="pt-1">其他条件进入此流程</p>
                <p class="pt-2">注意：同一个节点的条件分支只能有一个排它</p>
              </div>
              <div>
                <el-radio label="3">手动选择</el-radio>
              </div>
            </el-radio-group>
          </el-form>
        </div>
      </div>
      <div class="demo-drawer__footer clear center">
        <el-button type="primary" @click="saveCondition">保 存</el-button>
        <el-button @click="closeDrawer">取 消</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script setup>
import employeesRoleDialog from "../dialog/employeesRoleDialog.vue";
import $func from "../../plugins/preload";
// import { mapState, mapMutations } from "../../plugins/lib.js";
import { storeToRefs } from "pinia";
import { getConditions } from "../../plugins/api.js";
import { workFlowStoreHook } from "@/store/modules/workflow";
import { ref, watch, computed, reactive } from "vue";

let conditionVisible = ref(false);
let conditionsConfig = ref({
  conditionNodes: []
});
let conditionConfig = ref({});
let PriorityLevel = ref("");
let conditions = ref([]);
let conditionList = ref([]);
let conForm = reactive({ type: 1, autocon: "请选择" });
let { tableId, conditionsConfig1, conditionDrawer } = storeToRefs(
  workFlowStoreHook()
);
// let { tableId, conditionsConfig1, conditionDrawer } = mapState();
let visible = computed({
  get() {
    return conditionDrawer.value;
  },
  set() {
    closeDrawer();
  }
});
watch(conditionsConfig1, val => {
  conditionsConfig.value = val.value;
  PriorityLevel.value = val.priorityLevel;
  conditionConfig.value = val.priorityLevel
    ? conditionsConfig.value.conditionNodes[val.priorityLevel - 1]
    : { nodeUserList: [], conditionList: [] };
});
// let { setCondition, setConditionsConfig } = mapMutations();

const saveCondition = () => {
  closeDrawer();
  // workFlowStoreHook().setConditionsConfig({
  //   value: conditionsConfig.value,
  //   flag: true,
  //   id: conditionsConfig1.value.id
  // });
};
const closeDrawer = val => {
  workFlowStoreHook().setCondition(false);
};
</script>
<style lang="scss">
.condition_copyer {
  .approver_content {
    padding-bottom: 10px;
    border-bottom: 1px solid #f2f2f2;
  }

  .approver_self_select,
  .approver_content {
    .el-button {
      margin-bottom: 20px;
    }
  }

  .approver_content,
  .approver_some,
  .approver_self_select {
    .el-radio-group {
      display: unset;
    }

    .el-radio {
      width: 27%;
      margin-bottom: 20px;
      height: 16px;
    }
  }

  .approver_manager p {
    line-height: 32px;
  }

  .approver_manager select {
    width: 420px;
    height: 32px;
    background: rgba(255, 255, 255, 1);
    border-radius: 4px;
    border: 1px solid rgba(217, 217, 217, 1);
  }

  .approver_manager p.tip {
    margin: 10px 0 22px 0;
    font-size: 12px;
    line-height: 16px;
    color: #f8642d;
  }

  .approver_self {
    padding: 28px 20px;
  }

  .approver_self_select,
  .approver_manager,
  .approver_content,
  .approver_some {
    padding: 20px 20px 0;
  }

  .approver_manager p:first-of-type,
  .approver_some p {
    line-height: 19px;
    font-size: 14px;
    margin-bottom: 14px;
  }

  .approver_self_select h3 {
    margin: 5px 0 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 19px;
  }
  .flex {
    display: flex;
  }
  .el-radio-group {
    display: block;
    padding-left: 7px;
    font-size: 1em;
    > div {
      padding-bottom: 22px;
    }
  }
  .autocon {
    width: 503px;
    min-height: 64px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid rgba(52, 56, 68, 0.15);
    cursor: pointer;
    padding: 10px;
    color: #666;
  }
  .pt-1 {
    padding-left: 22px;
    line-height: 22px;
  }
  .pt-2 {
    padding-left: 22px;
    line-height: 22px;
    color: red;
  }
  .center {
    text-align: center;
  }
}
</style>
